import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Popconfirm } from 'antd';
import AssetTypeModal from '../../components/basic/AssetTypeModal';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;

function AssetType({ dispatch, assetType, loading, form }) {

  const { getFieldDecorator, getFieldsValue,getFieldValue } = form;

  const columns = [{
    title: '资产分类名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  }, {
    title: '资产分类编号',
    dataIndex: 'serial',
    key: 'serial',
    width: 200,
  }, {
    title: '是否机柜',
    dataIndex: 'rack',
    key: 'rack',
    width: 100,
    render: (value, row, index) => {
      return (
        value? '是' : '否'
      )
    }
  }, {
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>
            <AssetTypeModal title="编辑资产分类" record={record}  currentPid={assetType.pid}  assetType={assetType.assetTypeTree} onOk={editHandler.bind(null, record.id_)}>
            <a>编辑</a>
            </AssetTypeModal>
            <span className="ant-divider" />
            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
            <a>删除</a>
            </Popconfirm>
        </span>
    ),
  }];

  const pagination = {
    current:assetType.current,
    pageSize:assetType.currentSize,
    total: assetType.total,
    showSizeChanger: true,
    showTotal: (total => '共' + assetType.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'assetType/queryAssetTypeByPid',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'assetType/queryAssetTypeByPid',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':assetType.currentSize} },
      });
    },
  };

  const onSelect = (info) => {
    if(info.length > 0){
      dispatch({
        type: 'assetType/queryAssetTypeByPid',
        payload: { ...getFieldsValue(),...{'pid':info[0]} },
      });
    }
  }

  const loop = data => data.map((item) => {
      if (item.assetType && item.assetType.length) {
        return <TreeNode key={item.id_} title={item.name}>{loop(item.assetType)}</TreeNode>;
      }
      return <TreeNode key={item.id_} title={item.name} />;
  });

  const submitHandle = () => {
    dispatch({
        type: 'assetType/queryAssetTypeByPid',
        payload: { ...getFieldsValue() },
    });
  }

  const createHandler = (values) => {
    dispatch({
      type: 'assetType/create',
      payload: values,
      search:{pid:assetType.pid,...getFieldsValue()},
    });
  }

  const editHandler = (id, values) => {
    dispatch({
      type: 'assetType/edit',
      payload: { id, ...values },
      search:{pid:assetType.pid,...getFieldsValue(),...{'pageNum':assetType.current, 'pageSize':assetType.currentSize}},
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: 'assetType/remove',
      payload: id,
      search:{pid:assetType.pid,...getFieldsValue(),...{'pageNum':assetType.current, 'pageSize':assetType.currentSize}},
    });
  }


  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{width:'250px',float: "left"}}>
        <div style={{width:'100%',height:'40px',backgroundColor:'#232f40',lineHeight:'40px',color:'#fff',paddingLeft:'20px',fontSize:'14px',fontWeight:'400'}}>
          资产分类信息
        </div>
        <div style={{width:'100%',}}>
          <Tree
            defaultExpandedKeys = {['1']}
            onSelect={onSelect}
          >           
            { assetType.assetTypeTree && loop(assetType.assetTypeTree) }
          </Tree>
        </div>
      </div>
      <div style={{minHeight:'100%',marginLeft:'250px'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingRight:'20px',paddingTop:'10px'}}>
          <Form layout="inline">
            <FormItem>
              {getFieldDecorator('pid',{initialValue:assetType.pid})(
                <Input type="hidden" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="资产分类名称" style={{ width:'200px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
               <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>
                <AssetTypeModal title="新增资产分类" record={{}} currentPid={assetType.pid} assetType={assetType.assetTypeTree} onOk={createHandler}>
                  <Button type="primary" size='large'>新增分类</Button>
                </AssetTypeModal>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:'20px 30px',}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={assetType.assetTypeList} pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return { assetType : state.assetType,loading:state.loading.models.assetType};
}

AssetType = Form.create()(AssetType);

export default connect(mapStateToProps)(AssetType);
